<template>
    <s-layout id="layout" :title="'新增发票'" navbar="normal" leftIconColor="#ffffff" :autoBack="true" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#ffffff', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            <view class="area form_box">
                <scroll-view scroll-y style="height: 70vh;" :enable-back-to-top="true">
                    <u--form labelPosition="left" :model="FormData" :rules="rules" ref="formRole" :borderBottom="false">

                        <!-- 公司名称 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="公司名称：" prop="company_name" ref="company_name">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请输入公司名称" v-model="FormData.company_name" border="none"></u--input>
                        </u-form-item>

                        <!-- 税号 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="税号：" prop="tax_number" ref="tax_number">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" placeholder="请输入税号" v-model="FormData.tax_number" border="none"></u--input>
                        </u-form-item>

                        <!-- 银行账号 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="银行账号：" prop="account_number" ref="account_number">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="number" placeholder="请输入银行账号" v-model="FormData.account_number" border="none"></u--input>
                        </u-form-item>

                        <!-- 电话 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="电话：" prop="tel" ref="tel">
                            <u--input :maxlength="11" :clearable="false" disabledColor="rgba(0,0,0,0)" type="number" inputAlign="right" placeholder="请输入电话" v-model="FormData.tel" border="none"></u--input>
                        </u-form-item>

                        <!-- 联行号 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="联行号：" prop="bank_key" ref="bank_key">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="number" placeholder="请输入联行号" v-model="FormData.bank_key" border="none"></u--input>
                        </u-form-item>

                        <!-- 开户行名称 -->
                        <!-- <view class="area form_content"> -->
                            <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="开户行名称：" prop="account_with_bank" ref="account_with_bank">
                            </u-form-item>
                            <view class="textarea_box">
                                <up-textarea height="80" v-model="FormData.account_with_bank" placeholder="请输入开户行名称" ></up-textarea>
                            </view>
                        <!-- </view> -->

                        <!-- 公司地址 -->
                            <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="公司地址：" prop="address" ref="address">
                            </u-form-item>
                            <view class="textarea_box">
                                <up-textarea height="80" v-model="FormData.address" placeholder="请输入详细地址" ></up-textarea>
                            </view>
                        
                    </u--form>
                </scroll-view>
            </view>
        </view>

    </s-layout>

    <!-- 底部保存按钮 -->
    <view>
        <s-button @netWork="submitForm" :text="'提交'" />
    </view>

</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { isEmpty } from '@/sheep/helper/utils.js'
    const { safeAreaInsets } = uni.getSystemInfoSync()
    onLoad(() => {

    })
        // 表单数据
    const FormData = reactive({
        company_name:'',            // 公司名称
        tax_number:'',              // 税号
        address:'',                 // 地址
        account_number:'',          // 银行帐号
        account_with_bank:'',       // 开户行名称
        bank_key:'',                // 联行号
        tel:''                      // 电话
    })
    // 表单校验
    const rules = {
        company_name:[
            {
                required:true,
                message:'请输入公司名称',
            },
        ],
        tax_number:[
            {
                required:true,
                message:'请输入税号',
            }
        ],
        address:[
            {
                required:true,
                message:'请输入地址',
            }
        ],
        account_number:[
            {
                required:true,
                message:'请输入银行卡号',
            },
            {
                type: 'number',
                message: '银行卡号必须为数字格式',
            }
        ],
        account_with_bank:[
            {
                required:true,
                message:'请输入开户行名称',
            }
        ],
        tel:[
            { required: true, message: '请输入电话', trigger: 'blur' },
            {
                validator: (rule, value, callback) => {
                    var reg = /^1[3456789]\d{9}$/;
                    if (reg.test(value)) {
                        callback();
                    } else {
                    callback(new Error('手机号码格式不正确'));
                    }
                }
            }
        ]
    }

    const formRole = ref(null)
    // 表单提交
    const submitForm = () => {
        formRole.value.validate().then(async (res)=> {
            const resust = await sheep.$api.invoice.invoiceAddAPI(FormData);
            if(resust.code == 1) {
                setTimeout(() => {
                    sheep.$router.back(true)
                },1000)
            } else {
                setTimeout(()=> {
                    sheep.$helper.toast(res.msg);
                    // uni.showToast({
                    //     title:res.msg,
                    //     icon:'none'
                    // })
                },1000)
            }
        }).catch((err) => {})
    }

</script>

<style lang="scss" scoped>

    :deep(.u-form-item__body){
        height: 60rpx;
        border-radius: 16rpx;
        background-color: #F9FAFF;
        margin-bottom:30rpx;
    }

    // uview 内部样式 u-form-item 背景颜色
    :deep(.u-form-item){
        &:nth-last-child(2) {
            .u-form-item__body {
                margin-bottom:10rpx;
                background-color: #ffffff !important;
            }
        }
        &:nth-last-child(4) {
            .u-form-item__body {
                margin-bottom:10rpx;
                background-color: #ffffff !important;
            }
        }
    }

    :deep(.u-textarea.data-v-31706dd7) {
        background-color: #F9FAFF;
        padding: 0;
        margin-bottom:10rpx;
    }

    // uview 内部样式 表单验证 警告文字距离
    :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
        margin-left: 0 !important;
    }

    // uview 内部样式 up-textarea 文字距离
    :deep(.u-textarea__field.data-v-31706dd7) {
        margin-top: 30rpx;
        margin-left: 30rpx;
    }

    // uview 内部样式 输入内容右边间距
    :deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
        margin-right: 20rpx;
    }

    // uview 内部样式 label左边间距
    :deep(.u-form-item__body__left) {
        padding-left: 40rpx;
    }

    // uview 内部样式 label字体粗细
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    // 最大盒子
    .container {
        width: 100%;
        background-size: cover; /* 或 contain */
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 表单盒子
    .form_box {
        width: calc(100% - 100rpx);
        padding: 30rpx 20rpx;
        margin: 20rpx auto  0 auto; 
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    }
    // 备注
    .remark {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
    }
</style>


